<template>
  <div>
    <h2 class="juzhong"><strong>区块链数据浏览</strong></h2>
    <div class="jss35">
      <div class="row">
        <div class="col-sm-12">
          <div class="MuiPaper-root MuiCard-root jss36 MuiPaper-elevation1 MuiPaper-rounded">
            <div class="jss38 jss39">
              <div class="row">
                <div class="col-sm-4">
                  <div class="MuiAvatar-root MuiAvatar-circle jss40 jss42 MuiAvatar-colorDefault">
                    <!-- <span aria-hidden="true" class="fa fa-cube">
                    </span> -->
                    <span><img src="../../assets/images/tubiao1.jpg"></span>
                  </div>
                </div>
                <div class="col-sm-4">
                  <h1 class="jss37">
                    <div>{{block_number}}</div>
                  </h1>
                </div>
              </div>区块数
            </div>
            <div class="jss38 jss39">
              <div class="row">
                <div class="col-sm-4">
                  <div class="MuiAvatar-root MuiAvatar-circle jss40 jss44 MuiAvatar-colorDefault">
                    <!-- <span aria-hidden="true" class="fa fa-list-alt">                    </span> -->
                    <span><img src="../../assets/images/tubiao2.jpg"></span>
                  </div>
                </div>
                <div class="col-sm-4">
                  <h1 class="jss37">
                    <div>{{ node_number }}</div>
                  </h1>
                </div>
              </div>
              总节点数
            </div>
            <div class="jss38 jss39">
              <div class="row">
                <div class="col-sm-4">
                  <div class="MuiAvatar-root MuiAvatar-circle jss40 jss41 MuiAvatar-colorDefault">
                    <!-- <span aria-hidden="true" class="fa fa-users"></span> -->
                    <span><img src="../../assets/images/tubiao3.jpg"></span>
                  </div>
                </div>
                <div class="col-sm-4">
                  <h1 class="jss37">
                    {{ org_number }}
                  </h1>
                </div>
              </div>
              组织数
            </div>
            <div class="jss38">
              <div class="row">
                <div class="col-sm-4">
                  <div class="MuiAvatar-root MuiAvatar-circle jss40 jss43 MuiAvatar-colorDefault">
                    <!-- <span aria-hidden="true" class="fa fa-handshake-o">图片</span> -->
                    <span>
                      <img src="../../assets/images/tubiao4.jpg">
                    </span>
                  </div>
                </div>
                <div class="col-sm-4">
                  <h1 class="jss37">
                    {{ channel_number }}
                  </h1>
                </div>
              </div>
              智能合约
            </div>
          </div>
        </div>
      </div>
      <div class="row">

      </div>
    </div>
    <div class="col-sm-6">
      <div class="MuiPaper-root MuiCard-root jss45 MuiPaper-elevation1 MuiPaper-rounded">
      <div class="jss53">
      <div>
        <section
          style="position: relative; font-size: 80%; font-weight: 300; padding: 20px 0px; width: 75%; margin: 10px auto;">
          <div
            style="position: absolute; top: 0px; height: 100%; width: 2px; background: rgb(160, 178, 184); left: 16px;">
          </div>
          <div style="position: relative; margin: 10px 0px; padding-left: 45px; text-align: left;">
            <div
              style="position: absolute; top: 0px; border-radius: 50%; width: px; height: 30px; margin-left: 1px; background: rgb(233, 240, 245); border: 2px solid rgb(13, 55, 153); display: flex; color: rgb(13, 55, 153); left: 0px;">
              <span
                style="display: flex; width: 32px; height: 32px; position: relative; justify-content: center; cursor: pointer; align-self: center; align-items: center;">
                <!-- <span aria-hidden="true" class="fa fa-cube"></span> -->
                <img src="../../assets/images/tubiao5.jpg" width="50">
              </span>
            </div>
            <div class="jss55"
              style="box-shadow: rgba(0, 0, 0, 0.118) 0px 1px 6px, rgba(0, 0, 0, 0.118) 0px 1px 4px; background-color: rgb(255, 255, 255); position: relative; width: 65%;">
              <div style="top: 24px; left: 100%; border-color: transparent transparent transparent rgb(255, 255, 255);">
              </div>
              <div
                style="background-color: rgb(98, 131, 208); padding: 10px; color: rgb(255, 255, 255); font-size: 13pt;">
                <div style="font-weight: bold;">最新区块数：
                <span>{{ block_number}}</span>
                </div>
                <div style="margin-top: -20px; float: right; text-align: right;"><a data-command="block-link"
                    href="#/"></a></div>
              </div>
              <div
                style="background-color: transparent; margin-bottom: 1em; line-height: 1.6; padding: 10px; min-height: 40px;">
                <p class="MuiTypography-root MuiTypography-body1"><b class="jss54"> 区块高度:</b>
                <span>{{ block_number }}</span>
                <br><b
                    class="jss54"> 前一区块hash:</b>
                    <div> {{ pre_hash }}</div>
                    <br><b
                    class="jss54"> 现在区块hash:</b>
                    <div> {{ new_hash }}</div>
                    </p>
                <!-- <h5 class="jss54"><span class="jss54 badge badge-secondary"><time class="jss54"
                      datetime="2022-08-04T01:29:33.618Z" title="2022-08-04T01:29:33.618Z">2 hours ago</time></span>
                </h5> -->
                <div style="clear: both; display: table;"></div>
              </div>
            </div>
            <div style="clear: both; display: table;"></div>
          </div>
          <!-- <div style="position: relative; margin: 10px 0px; padding-left: 45px; text-align: left;"><div style="position: absolute; top: 0px; border-radius: 50%; width: 30px; height: 30px; margin-left: 1px; background: rgb(233, 240, 245); border: 2px solid rgb(13, 55, 153); display: flex; color: rgb(13, 55, 153); left: 0px;"><span style="display: flex; width: 32px; height: 32px; position: relative; justify-content: center; cursor: pointer; align-self: center; align-items: center;"><span aria-hidden="true" class="fa fa-cube"></span></span></div><div class="jss55" style="box-shadow: rgba(0, 0, 0, 0.118) 0px 1px 6px, rgba(0, 0, 0, 0.118) 0px 1px 4px; background-color: rgb(255, 255, 255); position: relative; width: 65%;"><div style="top: 24px; left: 100%; border-color: transparent transparent transparent rgb(255, 255, 255);"></div><div style="background-color: rgb(98, 131, 208); padding: 10px; color: rgb(255, 255, 255); font-size: 13pt;"><div style="font-weight: bold;">Block 7 </div><div style="margin-top: -20px; float: right; text-align: right;"><a data-command="block-link" href="#/"></a></div></div><div style="background-color: transparent; margin-bottom: 1em; line-height: 1.6; padding: 10px; min-height: 40px;"><p class="MuiTypography-root MuiTypography-body1"><b class="jss54"> Channel Name:</b> mychannel <br><b class="jss54"> Datahash:</b> a324cb4bd50c823d169990ca6f3fbf977d6fd91fe81f5c651188c66ce9b4320d <br><b class="jss54"> Number of Tx:</b> 1</p><h5 class="jss54"><span class="jss54 badge badge-secondary"><time class="jss54" datetime="2022-08-04T01:29:33.618Z" title="2022-08-04T01:29:33.618Z">2 hours ago</time></span></h5><div style="clear: both; display: table;"></div></div></div><div style="clear: both; display: table;"></div></div> -->
        </section>
      </div>
    </div>
    </div>
    </div>
    <div class="col-sm-6">
      <!-- 饼状图 -->
      <div class="MuiPaper-root MuiCard-root jss45 jss46 MuiPaper-elevation1 MuiPaper-rounded">
            <div class="echart" id="mychart" :style="myChartStyle"></div>
      </div>
    </div>

    <div class="col-sm-6">
      <!-- 柱状图 -->
      <div class="MuiPaper-root MuiCard-root jss45 jss46 MuiPaper-elevation1 MuiPaper-rounded">
            <!-- <div class="echart" id="mychart" :style="myChartStyle"></div> -->
            <div class="echart" id="mychart1" :style="myChartStyle1"></div>
        <!-- <div>helloworld</div> -->
      </div>
    </div>

    <div class="col-sm-6">
      <div class="MuiPaper-root MuiCard-root jss47 jss46 MuiPaper-elevation1 MuiPaper-rounded">
            <!-- <h2><strong>测试报告</strong></h2> -->
            <div><a href="../../../static/report1.html" id="myhtml" >测试报告</a></div>
            <!-- <div class="echart" id="mychart" :style="myChartStyle"></div> -->
      </div>
    </div>
  </div>
</template>


<script>
import * as echarts from "echarts";
import API1 from '../../api/api_chain'

export default {
  name: "BlockchainBrowser",
  data()  {
    return {
      channel_number: 0,
      org_number: 0,
      block_number: 0,
      node_number: 0,
      pre_hash: " ",
      new_hash: " ",


      xData: ["写入事务", "读取事务" ], //横坐标
      yData: [97, 1298.3], //数据


      myChart: {},
      pieData: [
        {
          value: 16,
          name: "物理节点"
        },
        {
          value: 16,
          name: "移动节点"
        },
        {
          value: 1024,
          name: "虚拟节点"
        },
      ],
      pieName: [],
      myChartStyle: { float: "left", width: "90%", height: "400px" }, //图表样式
      myChartStyle1: { float: "left", width: "100%", height: "350px" } //图表样式

    };
  },
  mounted() {
    this.initDate(); //数据初始化
    this.initEcharts();
    this.getDate();
  },

  methods: {
    getDate() {
      API1.query_channelInfo().then(res => {
          console.log(res)
          if(res.code != 0){
            this.$message.error(res.msg)
          }else{
            res = res.msg
            this.block_number = res.blockHeight
            this.pre_hash = res.curHash
            this.new_hash = res.preHash
            this.org_number = 16
            this.channel_number = 1
            this.node_number = 1040

          }
      })


    },
    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        // this.xData[i] = i;
        // this.yData =this.xData[i]*this.xData[i];
        this.pieName[i] = this.pieData[i].name;
      }
    },
    initEcharts() {

      const option1 = {
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "事务处理能力",
          top: "5%",
          left: "center"
        },
        xAxis: {
          data: this.xData
        },
        yAxis: {
          type: "value",
          name: "单位(Tps)"
        },
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData,
            showBackground: true,
            barWidth: 40,
            label: {
              normal: {
                      show: true,
                      position: 'outside', // 数值显示在内部
                      // formatter: '{b} : {c} ({d}%)', // 格式化数值百分比输出
                      formatter: '{c}', // 格式化数值百分比输出
                    },
            },

          }
        ]
      };
      const myChart1 = echarts.init(document.getElementById("mychart1"));
      myChart1.setOption(option1);
      window.addEventListener("resize", () => {
        this.myChart1.resize();
      });

      // 饼图
      const option = {
        legend: {
          // 图例
          data: this.pieName,
          right: "5%",
          top: "30%",
          orient: "vertical"
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "具体节点信息",
          top: "5%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            label: {
              normal: {
                      show: true,
                      position: 'outside', // 数值显示在内部
                      formatter: '{b} : {c} ({d}%)', // 格式化数值百分比输出
                    },
            },
            radius: "30%", //饼图半径
            data: this.pieData
          }
        ]
      };
      console.log(this.seriesData);
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
}
</script>




<style>
#myhtml {
  font-weight: bold;
  color: blue;
  text-align: center;
  position:relative;
  height:60px;
  line-height:60px;
}
#p1 {
    bottom: 0px;
    left: 40px;
}

.MuiPaper-elevation1 {
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
}
.jss46 {
    text-align: center;
}
.jss45 {
    height: 335px;
    margin-bottom: 2%;
}
.jss47 {
    height:60px;
    margin-bottom: 2%;
}
.MuiCard-root {
    overflow: hidden;
}
.col-sm-6 {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    margin: 30px auto;
}
.jss55 {
    width: 90% !important;
    word-wrap: break-word;
}
.jss53 {
  height: 300px;
  overflow-y: scroll;
}
.jss54 .badge-secondary {
    background-color: #5e548f;
}
.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}

.juzhong {
  text-align: center;
}

.jss35 {
  width: 80%;
  margin-left: 10%;
  padding-top: 40px;
  margin-right: 10%;
  padding-left: 0;
}

.jss37 {
  margin-top: 60%;
  margin-right: 50%;
}

.h1,
h1 {
  font-size: 2.5rem;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-sm-12 {
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-12,
.col-sm-4 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

div {
  display: block;
}

.jss36 {
  height: 175px;
  margin-bottom: 20px;
  background-color: #ffffff;
}

.MuiCard-root {
  overflow: hidden;
}

.MuiPaper-elevation1 {
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
}

.MuiPaper-rounded {
  border-radius: 4px;
}

.MuiPaper-root {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #ffffff;
}

.jss38 {
  color: #000000;
  float: left;
  width: 25%;
  height: 100%;
  display: block;
  font-size: 18pt;
  text-align: center;
}

.jss39::after {
  bottom: 55%;
  height: 45%;
  content: ' ';
  display: block;
  position: relative;
  border-right: 2px #dff1fe solid;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.col-sm-4 {
  -webkit-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-handshake-o:before {
  content: "\f2b5";
}

.jss40 {
  margin-top: 65%;
  margin-left: 60%;
  justify-content: center;
}

.jss43 {
  color: #407b20;
  background-color: #d0ecda;
}

.MuiAvatar-colorDefault {
  color: #fafafa;
  background-color: #bdbdbd;
}

.MuiAvatar-root {
  width: 40px;
  height: 40px;
  display: flex;
  overflow: hidden;
  position: relative;
  font-size: 1.25rem;
  align-items: center;
  flex-shrink: 0;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 1;
  user-select: none;
  border-radius: 50%;
  justify-content: center;
}

body {
  color: rgba(0, 0, 0, 0.87);
  margin: 0;
  font-size: 0.875rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  background-color: #fafafa;
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.fa-cube:before {
  content: "\f1b2";
}

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
</style>

